<script lang="ts" setup>
import { useRouter, useRoute } from 'vue-router'
import { watch , onMounted , ref , computed} from 'vue';
const router = useRouter()
const route = useRoute()
import {
   ElContainer,
   ElHeader,
   ElAside,
   ElMain ,
   ElMenu ,
   ElMenuItemGroup,
   ElMenuItem,
   ElSubMenu,
   ElIcon,
   ElAffix,
  } from 'element-plus';
 import {
  Location
} from '@element-plus/icons-vue'
const defaultActive = ref('productList');
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const goProduct = ()=>{
    router.push({ path: '/productList' })
}
const goOrderList = () => {
    router.push({ path: '/orderList' })  
}
const goUserList = () => {
    router.push({ path: '/userList' })  
}
const goNewProduct = ()=> {
    router.push({ path: '/newProduct'})  
}
watch(route,(newVal)=>{
    console.log('路由变化:',newVal);
    localStorage.setItem('curRouter',String(newVal.name));
})
const isCollapse = computed(()=>{
    const viewportWidth = document.documentElement.clientWidth;
    if(viewportWidth > 640){
        return false;
    }
    return true;
})
onMounted(() => {
    let curRouter = localStorage.getItem('curRouter');
    if(curRouter){
        defaultActive.value = curRouter;
    }
})
const isShowAside = ref(false);
const toggle = ()=>{
    isShowAside.value=!isShowAside.value
}
const isShoComputed = computed(()=>{
    if(!isCollapse.value){
        return true;
    }
    return isShowAside.value;
})
</script>
<template>
    <div class="h-full common-layout">
      <el-container class="h-full">
        <el-header class="flex items-center justify-start bg-blue-100 pl-[50px]">云上商城管理系统</el-header>
        <el-container>
          <el-affix class="absolute left-[24px] top-[20px]" v-show="isCollapse">
              <el-icon  @click="toggle"><Expand /></el-icon>
          </el-affix>
          <el-aside v-if="isShoComputed" class="items-start justify-start w-auto sm:w-[200px]">
            <el-menu
                :collapse="isCollapse"
                :default-active="defaultActive"
                class="h-full el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
            >
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon><location /></el-icon>
                        <span>商品管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="productList" @click="goProduct">商品管理</el-menu-item>
                        <el-menu-item index="orderList" @click="goOrderList">订单管理</el-menu-item>
                        <el-menu-item index="userList" @click="goUserList">用户管理</el-menu-item>
                    </el-menu-item-group>
                    <el-sub-menu index="1-5">
                        <template #title>订货管理</template>
                        <el-menu-item index="newProduct" @click="goNewProduct">新商品列表</el-menu-item>
                    </el-sub-menu>
                </el-sub-menu>
            </el-menu>
          </el-aside>
          <el-container>
            <el-main class="h-full p-0">
                <RouterView />
            </el-main>
          </el-container>
        </el-container>
      </el-container>
    </div>
  </template>
 